<template lang="pug">
.chat
  .left 当前在线：{{ onlinePeople.length }}
    p.user(
      v-for="(item, index) in onlinePeople",
      :key="index",
      ) {{item}}
  .right
    #msg-list.message
      div(v-for="(item, index) in history", :key="index")
        div(style="display: inline-block")
          el-avatar(
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
          )
          .msg {{ item.name }}: {{ item.msg }}
    .send
      el-input(
        type="text",
        v-model="message",
        placeholder="请输入内容",
        @keyup.enter.native="sendMessageToServer",
        clearable
      )
        el-button(slot="append", @click="sendMessageToServer") send
</template>

<script>
export default {
  data() {
    return {
      message: "",
      name: "",
      history: [],
      onlineCount: 99,
      onlinePeople: []
    };
  },
  sockets: {
    connect: function () {
      console.log("连接成功");
    },
    msg: function (val) {
      console.log("接收到服务端消息:", val);
      this.history.push(val);
      const tipsDiv = document.getElementById("msg-list");
      tipsDiv.scrollTop = tipsDiv.scrollHeight;
    },
    filter: function (val) {
      console.log("接收到服务端消息:", val);
    },
    new: function (val) {
      console.log(val);
    },
    res: function (val) {
      val
      console.log('发送成功');
    },
    join: function (val) {
      // console.log(val.message);
      const h = this.$createElement;
      this.$notify.info({
          title: '加入/退出',
          message: h('p', { style: 'color: #409eff'}, val.message),
          duration: 2500
        });
      this.onlinePeople = val.clients
    },
    online: function (val) {
      this.onlinePeople = val.clients
    }
  },
  methods: {
    sendMessageToServer() {
      this.$socket.emit("chat", { name: this.name, msg: this.message });
      this.message = "";
    },
  },
  mounted() {
    this.name = window.localStorage.getItem("name");
    this.$socket.emit('getOnline', {})
  },
};
</script>

<style lang="less" scoped>
.chat {
  width: 100%;
  height: 100%;
  display: flex;
  // position: relative;
  .left {
    flex: 2;
    overflow: scroll;
    overflow-x: hidden;
    background-color: #89b5da;
    margin: 0 10px;
    padding: 10px;
    border-radius: 10px;
    height: 700px;
    .user {
      background-color: #fff;
      border-radius: 10px;
      height: 40px;
      line-height: 40px;
    }
  }
  .left::-webkit-scrollbar {
    display: none;
  }
  .right {
    flex: 8;
    .message {
      border: solid 1px #777;
      height: 650px;
      background-color: #fff;
      border-radius: 20px;
      overflow: scroll;
      overflow-x: hidden;
      padding: 0 0 50px 10px;
      text-align: left;
      .msg {
        padding: 10px;
        display: inline-block;
        width: auto;
        background-color: #409eff;
        margin-bottom: 20px;
        margin-left: 20px;
        border-radius: 10px;
        box-shadow: 5px 5px 5px #409ef0;
      }
    }
    .message::-webkit-scrollbar {
      display: none;
    }
    .send {
      position: absolute;
      bottom: 10px;
      width: 75%;
    }
  }
  @media screen and (max-width: 780px) {
    .left {
      display: none;
    }
    .right {
      flex: 8;
      .message {
        height: 600px;
      }
    }
  }
}
</style>